<template>
  <div>
    <page-main>
      <el-table
        :data="tableData"
        border
        style="width: 100%;"
        height="50vh"
        v-loading="loading"
      >
        <el-table-column prop="unit_id" label="社会单位" ></el-table-column>
        <el-table-column prop="danger_source" label="上报来源" :formatter="dangerSourceFormatter"></el-table-column>
        <el-table-column prop="check_remark" label="隐患描述"></el-table-column>
        <el-table-column prop="address" label="隐患地址"></el-table-column>
        <el-table-column prop="effect_ids" label="可能导致的事故"></el-table-column>
        <el-table-column prop="danger_level" label="隐患等级"></el-table-column>
        <el-table-column
          prop="check_images"
          label="上报图片"
        >
         <template #default="scope">
            <el-image
              style="width: 60px; height: 60px;"
              :src="upDataUrl + scope.row.check_images"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.check_images]"
            ></el-image>
          </template></el-table-column>
        <el-table-column prop="check_videos" label="上报视频">
           <template #default="scope">
                <video
              v-if="
                Object.prototype.toString.call(scope.row.check_videos) ==
                  '[object Array]' && scope.row.check_videos.length >= 1
              "
              width="60"
              height="60"
              controls="controls"
            >
              <source :src="scope.row.check_videos[0]" type="video/ogg" />
              <source :src="scope.row.check_videos[0]" type="video/mp4" />
              <source :src="scope.row.check_videos[0]" type="video/webm" />
              <object
                :data="scope.row.check_videos[0]"
                width="320"
                height="240"
              ></object>
            </video>
            <img
              v-else
              src="@/assets/images/errorVideo.png"
              style="width: 60px; height: 60px; margin-right: 20px;"
            />
           </template>
        </el-table-column>
        <el-table-column prop="result_remark" label="处理结果描述"></el-table-column>
        <el-table-column
          prop="result_images"
          label="处理结果图片"
        >
         <template #default="scope">
            <el-image
              style="width: 60px; height: 60px;"
              :src="upDataUrl + scope.row.result_images"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.result_images]"
            ></el-image>
          </template></el-table-column>
        <el-table-column prop="result_videos" label="处理结果视频">
           <template #default="scope">
                <video
              v-if="
                Object.prototype.toString.call(scope.row.result_videos) ==
                  '[object Array]' && scope.row.result_videos.length >= 1
              "
              width="60"
              height="60"
              controls="controls"
            >
              <source :src="scope.row.result_videos[0]" type="video/ogg" />
              <source :src="scope.row.result_videos[0]" type="video/mp4" />
              <source :src="scope.row.result_videos[0]" type="video/webm" />
              <object
                :data="scope.row.result_videos[0]"
                width="320"
                height="240"
              ></object>
            </video>
            <img
              v-else
              src="@/assets/images/errorVideo.png"
              style="width: 60px; height: 60px; margin-right: 20px;"
            />
           </template>
        </el-table-column>
        <el-table-column prop="exec_time" label="处理时间">
          <template #default="scope">
            <div>{{ $getDateTime(scope.row.exec_time) }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="getDateList"
          v-model:currentPage="tableDataInfo.current_page"
          :total="tableDataInfo.total"
          :page-count="tableDataInfo.last_page"
          background
          layout="total,prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableDataInfo: "",
      upDataUrl: import.meta.env.DEV
        ? "/proxy/"
        : import.meta.env.VITE_APP_API_BASEURL,
      loading: false,
    };
  },
  created() {
    this.getDateList();
  },
  methods: {
      dangerSourceFormatter(row, column, cellValue, index){
          let temp = {
              1:'公众',
              4:'监管机构',
              5:'维保单位',
              9:'社会单位'
          }
          return temp[cellValue]
      },
    getDateList(page) {
      let unit_id = localStorage.getItem('fa_user_info')
      this.loading = true;
      let pageNum = 1;
      if (page) pageNum = page;
      
      console.log(unit_id);
      this.$api
        .post("/unit/Dashboard/dangerList", { type: "twoMonthDangerUnitSourceWbTotal", unit_id:JSON.parse(unit_id).unit_id })
        .then((res) => {
          res?.data?.list?.map((curVal) => {
            curVal.report_images=JSON.parse(curVal.report_images);
            curVal.report_videos=JSON.parse(curVal.report_videos);
            curVal.result_images=JSON.parse(curVal.result_images);
            curVal.result_videos=JSON.parse(curVal.result_videos);
          });
          this.tableData = res.data.list;
          delete res.data.data;
          this.tableDataInfo = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
.block {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
</style>
